import { Navigate } from "react-router-dom";
import React from "react";

import Home from "../pages/home";
import HomeRecommend from "../pages/home/HomeRecommend";
import HomeRanking from "../pages/home/HomeRanking";
import HomeSongMenu from "../pages/home/HomeSongMenu";
import Categrory from "../pages/category";
import Order from "../pages/order";
import NotFound from "../pages/not-found";
import Detail from "../pages/detail";
import User from "../pages/user";

const About = React.lazy(() => import("../pages/about"));
const Login = React.lazy(() => import("../pages/login"));

const routes = [
  {
    path: "/",
    element: <Navigate to="/home" />
  },
  {
    path: "/home",
    element: <Home />,
    children: [
      {
        path: "/home",
        element: <Navigate to="/home/recommend" />
      },
      {
        path: "/home/recommend",
        element: <HomeRecommend />
      },
      {
        path: "/home/ranking",
        element: <HomeRanking />
      },
      {
        path: '/home/songmenu',
        element: <HomeSongMenu />
      }
    ]
  },
  {
    path: '/about',
    element: <About />
  },
  {
    path: '/login',
    element: <Login />
  },
  {
    path: '/category',
    element: <Categrory />
  },
  {
    path: '/order',
    element: <Order />
  },
  {
    path: '/detail/:id',
    element: <Detail />
  },
  {
    path: '/user',
    element: <User />
  },
  {
    path: '*',
    element: <NotFound />
  }
]

export default routes;
